<template>
    <div class="ShoppingButton">
        <div class="button-join" @click="addShopToCar">
            <p>加入购物车</p>
        </div>
        <div class="button-purchase">
            <p>立即购买</p>
            </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    name:"ShoppingButton",
    data () {
        return {
           
        }
    },
    props: ['shopData'],
    methods: {
        ...mapMutations(['car/addProductToCar','car/checkShopState']),
        addShopToCar () {
            //请求商品数据，将商品数据存起来
            //先判断次商品存不存在
            this['car/checkShopState'](this.shopData)
            this['car/addProductToCar'](this.shopData)

        }
    }
}
</script>

<style scoped>
    .ShoppingButton{
        width: 100%;
        height: 0.8rem;
        background-color: #fff;
        padding-bottom:0.3rem; 
    }
    .button-join,.button-purchase{
        width: 48%;
        height: 100%;
        line-height: 0.8rem;
        text-align: center;
        color: #ffffff;
        
    }
    .button-join{
        display:inline-block;
        margin-right: 0.05rem
    }
    .button-join p{
        width: 50%;
        height: 100%;
        float: right;
       background-color:#ff7624;
       border-radius:50px;
    }
    .button-purchase{
        display:inline-block;
        margin-left: 0.05rem
    }
    .button-purchase p{
        width: 50%;
        height: 100%;
        float: left;
        background-color: #30a674;
        border-radius:50px;
    }
</style>